<template>
  <div class="app-container">
    <el-button style="margin: 10px;" @click="handleAdd">新增</el-button>
    <el-table
      v-loading="loading"
      :data="article"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="标题">
        <template slot-scope="scope">{{ scope.row.title }}</template>
      </el-table-column>
      <el-table-column align="center" label="封面图">
        <template slot-scope="scope">
          <img :src="scope.row.cover " style="width: 100px" alt="">
        </template>
      </el-table-column>
      <el-table-column align="center" label="链接">
        <template slot-scope="scope">{{ scope.row.link }}</template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        label="操作"
        width="220"
        align="center"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="handleUpdateArticle(scope.row)">修改
          </el-button>
          <el-button size="mini" type="danger" @click="handleDeleteArticle(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <section class="pagination-bar">
      <el-pagination
        background
        :current-page="query.page"
        :page-sizes="[100, 50, 30, 10]"
        :page-size="query.limit"
        layout="sizes, prev, pager, next"
        :total="count"
        @size-change="(limit) => {query.limit = limit; fetchData()}"
        @current-change="(page) => {query.page = page; fetchData()}"
      />
    </section>
    <el-dialog title="新增" :visible.sync="addDialogVisible">
      <el-form>
        <el-form-item lable="文章标题">
          <el-input v-model="tempData.title" placeholder="文章标题" />
        </el-form-item>
        <el-form-item lable="文章链接">
          <el-input v-model="tempData.link" placeholder="文章链接" />
        </el-form-item>
        <el-form-item lable="文章标题">
          <el-input v-model="tempData.cover" placeholder="文章图片" disabled="disabled" />
          <el-upload
            :action="updateUrl"
            name="file"
            :file-list="fileList"
            :headers="updateHeader"
            :on-success="updateSuccess"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <el-button @click="add">新增</el-button>
    </el-dialog>
    <el-dialog title="更新" :visible.sync="updateDialogVisible">
      <el-form>
        <el-form-item lable="文章标题">
          <el-input v-model="tempData.title" placeholder="文章标题" />
        </el-form-item>
        <el-form-item lable="文章链接">
          <el-input v-model="tempData.link" placeholder="文章链接" />
        </el-form-item>
        <el-form-item lable="文章标题">
          <el-input v-model="tempData.cover" placeholder="文章图片" disabled="disabled" />
          <el-upload
            :action="updateUrl"
            name="file"
            :file-list="fileList"
            :headers="updateHeader"
            :on-success="updateSuccess"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <el-button @click="update">更新</el-button>
    </el-dialog>
  </div>
</template>

<script>
import api from '../../api'
import { getToken } from '../../utils/auth'

export default {
  data() {
    return {
      article: '',
      count: 0,
      query: {
        page: 1,
        limit: 10
      },
      loading: false,
      addDialogVisible: false,
      updateDialogVisible: false,
      tempData: {
        title: '',
        cover: '',
        link: ''
      },
      fileList: '',
      updateHeader: {
        'Authorization': 'bearer' + getToken()
      },
      updateUrl: `${process.env.VUE_APP_BASE_API}/api/management/article/updateFile`
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      api.article.getArticle(this.query).then(res => {
        if (res.err_no === 0) {
          this.article = res.data.data
          this.count = res.data.count
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    },
    handleAdd() {
      this.addDialogVisible = true
      this.tempData = {
        title: '',
        cover: '',
        link: ''
      }
    },
    updateSuccess(res) {
      if (res.err_no === 0) {
        this.tempData.cover = res.data
      } else {
        this.$notify.error({
          title: '错误',
          message: res.err_msg
        })
      }
    },
    add() {
      api.article.addArticle(this.tempData).then(res => {
        if (res.err_no === 0) {
          this.$message({
            type: 'success',
            message: '新增成功'
          })
          this.addDialogVisible = false
          this.fetchData()
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    },
    handleUpdateArticle(row) {
      this.tempData.cover = row.cover
      this.tempData.link = row.link
      this.tempData.title = row.title
      this.tempData.id = row.id
      this.updateDialogVisible = true
    },
    update() {
      api.article.updateArticle(this.tempData).then(res => {
        if (res.err_no === 0) {
          this.$message({
            type: 'success',
            message: '更新成功'
          })
          this.updateDialogVisible = false
          this.fetchData()
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    },
    handleDeleteArticle(row) {
      this.$confirm('确定删除该文章?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.article.deleteArticle({ id: row.id }).then(res => {
          if (res.err_no === 0) {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.fetchData()
          } else {
            this.$notify.error({
              title: '错误',
              message: res.err_msg
            })
          }
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
